import React, { Suspense } from 'react'
import { BrowserRouter, Routes, Route } from "react-router-dom"
import { RoutesType, ROUTES_LIST } from './router'

const generator = (routes: RoutesType[]): RoutesType[] => {
    return routes.reduce((p, n) => {
        return n.element 
        ? p.concat(n) 
        : p.concat(generator(n.children as RoutesType[]))
    }, [] as RoutesType[])
}


const Router: React.FC = () => {
    let ele = generator(ROUTES_LIST)
    return (
        <Suspense>
            <BrowserRouter>
                <Routes>
                    {
                        ele.map(v=>(
                            <Route path={v.path} element={v.element} key={v.path}></Route>
                        ))
                    }
                </Routes>
            </BrowserRouter>
        </Suspense>
    )
}

export default Router